import { View, Text } from "@tarojs/components"
import { useSelector, useDispatch } from "react-redux"
import { updateActive } from "../store/module/tabbar"
import { Icon } from "@antmjs/vantui"
import Taro from "@tarojs/taro"

import "@antmjs/vantui/es/icon/style"
import "./index.less"

const Index = () => {

  // 设置 tabbar 信息对象
  const list = [
    {
      pagePath: '/pages/task/index',
      text: '任务',
      icon: 'description'
    },
    {
      pagePath: '/pages/index/index',
      text: '首页',
      icon: 'wap-home'
    },
    {
      pagePath: '/pages/my/index',
      text: '我的',
      icon: 'user-o',
    }
  ]

  const dispatch = useDispatch()
  const active = useSelector(state => state.tabbar.active)

  // tabbar 当前项改变
  const tabChange = (index) => {
    dispatch(updateActive(index))
    Taro.switchTab({
      url: list[index].pagePath
    })
  }

  return (
    <View className="tabbar">
      {
        list.map((e, i) => {
          return (
            <View
              onClick={() => tabChange(i)}
              className={['tabbar-item', active === i ? 'active' : '']}
              key={i}>
              {
                e.text !== '首页' ?
                  (
                    <Icon color={active === i ? '#fedb18' : '#fff'} size="20px" name={e.icon} />
                  ) :
                  (
                    <View className="index-icon">
                      <View className="index-icon-box">
                        <Icon color="#fff" size="20px" name={e.icon} />
                      </View>
                    </View>
                  )
              }
              <Text>{e.text}</Text>
            </View>
          )
        })
      }
    </View>
  )
}

export default Index